<template>
	<view class="container">
		<UniNavBar />
		<view class="box">
			<view class="register_txt dis-flex flex-y-center flex-x-center">
				<image class="avatar" src="/static/imgs/suo1.png" mode="widthFix" /> 时间锁
			</view>
			<view class="desc tac">信息封存，时间锁结束方可浏览</view>

			<u-form labelPosition="left" :model="ruleForm" :rules="rules" labelWidth="80" ref="uForm" class="uForm"
				:errorType="errorType" :labelStyle="labelStyle">
				<u-form-item label="时间锁类型" prop="account" borderBottom>
					<u-input disabled disabledColor="#ffffff" inputAlign="right" placeholder="自选时间"
						border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="开始时间" prop="password" borderBottom @click="startshow = true;">
					<u-input v-model="ruleForm.starttime" disabled disabledColor="#ffffff" inputAlign="right"
						placeholder="请选择" border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="结束时间" prop="password" borderBottom @click="endshow = true;">
					<u-input v-model="ruleForm.endtime" disabled disabledColor="#ffffff" inputAlign="right"
						placeholder="请选择" border="none"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<view class="ubtn">
					<u-button type="primary" text="确定" @click="submit"></u-button>
				</view>
			</u-form>
		</view>

		<!-- 时间 -->
		<u-datetime-picker :show="startshow" @cancel="()=>startshow = false" @confirm="start"
			@close="()=>startshow = false" mode="datetime" :closeOnClickOverlay="closeOnClickOverlay"
			v-model="starttime"></u-datetime-picker>
		<u-datetime-picker :show="endshow" @cancel="()=>endshow = false" @confirm="end" @close="()=>endshow = false"
			mode="datetime" :closeOnClickOverlay="closeOnClickOverlay" v-model="endtime"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		onLock
	} from '../../api/love.js'
	import UniNavBar from "@/components/uniNavbar/index.vue"
	export default {
		name: 'timeLock', // 时间锁
		components: {
			UniNavBar
		},
		data() {
			return {
				ruleForm: {
					endtime: '',
					starttime: '',
				},
				starttime: '',
				endtime: '',
				startshow: false,
				endshow: false,
				errorType: 'toast',
				labelStyle: {
					color: '#252525',
				},
				closeOnClickOverlay: true,
				rules: {
					starttime: [{
						required: true,
						message: '请输入开始时间',
						trigger: ['change', 'blur'],
					}],
					endtime: {
						type: 'string',
						required: true,
						message: '请输入结束时间',
						trigger: ['blur', 'change']
					}
				},
				shipid: 0,
			}
		},
		onLoad(option) {
			this.shipid = option.shipid
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		mounted() {

		},
		methods: {
			start(val) {
				console.log(val);
				const selectedTime = new Date(val.value);
				const formattedTime =
					`${selectedTime.getFullYear()}-${(selectedTime.getMonth() + 1).toString().padStart(2, '0')}-${selectedTime.getDate().toString().padStart(2, '0')} ${selectedTime.getHours().toString().padStart(2, '0')}:${selectedTime.getMinutes().toString().padStart(2, '0')}:${selectedTime.getSeconds().toString().padStart(2, '0')}`;
				this.ruleForm.starttime = formattedTime
				this.startshow = false
				console.log("Selected Time:", formattedTime);
			},
			end(val) {
				const selectedTime = new Date(val.value);
				const formattedTime =
					`${selectedTime.getFullYear()}-${(selectedTime.getMonth() + 1).toString().padStart(2, '0')}-${selectedTime.getDate().toString().padStart(2, '0')} ${selectedTime.getHours().toString().padStart(2, '0')}:${selectedTime.getMinutes().toString().padStart(2, '0')}:${selectedTime.getSeconds().toString().padStart(2, '0')}`;
				this.ruleForm.endtime = formattedTime
				this.endshow = false
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					this.timeLcock()
				}).catch(errors => {
					console.log(errors)
				})
			},
			//上锁
			async timeLcock() {
				console.log(this.shipid, 'sdddddddd');
				const res = await onLock({
					'ship_id': this.shipid,
					'lock_start_time': this.ruleForm.starttime,
					'lock_end_time': this.ruleForm.endtime
				}).then(res => {
					console.log('上锁', res);
					if (res.code == 1) {
						uni.showToast({
							icon: 'success',
							title: res.msg,
							duration: 1500,

						})
						setTimeout(function() {
							uni.navigateBack();
						}, 1500);
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		background: #fff;

		.box {
			padding: 120rpx 100rpx 0;

			.register_txt {
				font-size: 42rpx;
				color: $uni-text-color;
				font-weight: bold;

				.avatar {
					width: 36rpx;
					margin-right: 20rpx;
				}
			}

			.desc {
				margin-top: 45rpx;
				font-size: 26rpx;
				color: $uni-text-color-grey;
				line-height: 36rpx;
			}

			.uForm {
				margin-top: 100rpx;

				/deep/ .u-form-item__body {
					padding: 40rpx 0;
				}

				.ubtn {
					margin-top: 180rpx;

					/deep/ .u-button--primary {
						border-radius: 86rpx;
					}

				}
			}
		}
	}
</style>